// less是css预处理器，用来定义变量：颜色方法等

// 引入less包
@import './common.less';

/* 全局页面通用配置 ----start----*/
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Helvetica, "Hiragino Sans GB", "微软雅黑", Arial, sans-serif;
}

*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    height: 100%;
    font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Helvetica, "Hiragino Sans GB", "微软雅黑", Arial, sans-serif;
    font-size: 20px;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    position: relative;
    height: 100%;
    margin: 0;
    font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Helvetica, "Hiragino Sans GB", "微软雅黑", Arial, sans-serif;
    // 浏览器默认额字体是16px === 1rem 23px === ?
    font-size: 20px;
    line-height: 1.42857143;
    color: @c00;
    background-color: @cff;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline;
}

a {
    text-decoration: none;
    color: @c00;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 全局页面通用配置 ----end----*/

// 整体容器样式
.application-container {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 98;

    &.no-header {
        >main {
            display: block;
            position: relative;
            width: 100%;
            height: 100%;
        }
    }

    >header {
        display: block;
        position: relative;
        height: 48px;
        padding: 8px 0;
        background: @primary;
        .clear();

        .left,
        .right {
            float: left;
            position: relative;
            height: 32px;
            z-index: 9;
        }

        .center {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 48px;
            line-height: 48px;
            text-align: center;
            font-size: .85rem;
            color: @cff;
            z-index: 1;
        }

        .right {
            float: right;
        }

        i {
            float: left;
            width: 36px;
            height: 32px;
            background: url(../images/home.png) center center/30px 30px no-repeat;

            &.back {
                background-image: url(../images/back.png);
            }

            &.new {
                background-image: url(../images/add-icon.png);
            }
        }
    }

    >main {
        display: block;
        position: relative;
        height: calc(100% - 48px);
        background: @cf5;
        overflow-x: hidden;

        &::before {
            content: '';
            height: 0;
            width: 0;
            display: block;
        }
    }
}

// 列表页面样式
.list-box {
    display: block;
    position: relative;
    padding: 0 10px;
    height: 100%;
    overflow-x: hidden;


    .list-item {
        display: block;
        position: relative;
        padding: 10px 0;
        border-bottom: 1px solid #9D9D9D;

        .title {
            font-size: 1rem;
            line-height: 36px;
            color: @c1e;
            position: relative;

            em {
                font-size: .6rem;
                margin-left: 16px;
                color: @primary;
                font-style: normal;
            }

            i {

                img {
                    position: absolute;
                    top: 20px;
                    right: 20px;

                }
            }
        }

        .myBtn {
            height: 100%;
        }

        .myBtn span {
            color: #fff;
        }

        span {
            display: block;
            font-size: .7rem;
            line-height: 18px;
            margin-bottom: 12px;
            color: @c99;
        }

        .icon {
            position: absolute;
            top: 50%;
            right: 5px;
            margin-top: -40px;

            i {
                display: block;
                width: 28px;
                height: 28px;
                background: url('../images/edit.png') center center/26px 26px no-repeat;
                margin-bottom: 10px;

                &.delete {
                    background-image: url('../images/delete.png');
                }
            }
        }

    }

    .more {
        display: block;
        text-align: center;
        font-size: .6rem;
        color: @c99;
        line-height: 36px;
    }
}

// 带查询头的页面布局样式
.page-container {
    display: block;
    height: 100%;

    >header {
        display: flex;
        height: 48px;
        border-bottom: solid 1px @cdd;
        padding: 8px 0;

        input {
            flex: 1;
            outline: none;
            background-color: transparent;
            border: none;
            text-indent: 1rem;
            font-size: .8rem;
        }

        .icon {
            width: 60px;
            height: 36px;
            background: url('../images/search-icon.png') center center/32px 32px no-repeat;
        }
    }
}

.purchase-dropdown {
    flex: 0 0 80px;
    border-right: solid 1px #ddd;
    border-left: solid 1px #ddd;

    .van-dropdown-menu__bar {
        height: 32px;
        background-color: transparent;
        box-shadow: none;
    }
}


// 编辑页面下拉框样式
.van-dropdown-menu {
    width: 100%;

    .van-dropdown-menu__bar {
        height: 26px;
        vertical-align: middle;
    }
}

// 新增项目页面样式
.edit-box {
    display: block;
    position: relative;
    padding: 0px 10px;

    .formTitle {
        font-size: .7rem;
        line-height: 42px;
        color: #8E8E8E;
    }

    .van-field {
        border-bottom: 1px solid rgba(231, 231, 231, .3);
    }
}



// personpicker页面样式
.user-box {
    display: block;
    position: relative;
    height: 100%;

    >header {
        display: flex;

        input {
            flex: 1;
            outline: none;
            padding: 0;
            font-size: .7rem;
            border: none;
            text-indent: 1rem;
            border-bottom: 1px solid @c18;
        }

        button {
            background-color: @primary;
            border: none;
            height: 48px;

            img {
                width: 48px;
                height: 48px;
            }
        }
    }

    >ul {
        display: block;
        padding: 8px 10px;
        overflow-x: hidden;
        height: calc(100% - 48px);

        li {
            position: relative;
            display: block;
            font-size: .7rem;
            line-height: 46px;
            padding: 0px 6px;
            border-bottom: 1px solid @c18;

            .project {
                color: @primary;

                span {
                    color: @c99;
                    font-size: .6rem;
                }
            }

            .purchase {
                font-size: .6rem;
                color: @c99;
            }

            &::after {
                content: '';
                position: absolute;
                right: 10px;
                top: 50%;
                margin-top: -15px;
                display: inline-block;
                height: 30px;
                width: 30px;
                background: url('../images/diz.png') center center/50px 30px no-repeat;
            }

            &:last-child {
                border-bottom: none;
            }

            &.more {
                text-align: center;
                font-size: .6rem;
                color: @c99;

                &::after {
                    content: '';
                    background: none;
                }
            }
        }
    }
}

// 采购单详情页面样式
.detail-page {
    display: block;
    position: relative;

    .detail-item {
        padding: 2px 12px;
        font-size: .7rem;
        color: @c1e;
        line-height: 28px;
    }

    .vanSteps {
        background-color: transparent;

        .van-step--vertical {
            padding: 2px 2px 3px;
        }

        h3 {
            color: #07c160;
            line-height: 8px;
        }

        p {
            color: #07c160;
            font-size: .6rem;
            line-height: 8px;
        }
    }
}

.van-uploader__wrapper {
    position: relative;

    .van-uploader__upload {
        position: absolute;
        top: 0px;
        right: -10px;
        border-radius: 50%;
        background-color: @primary;
        width: 20px;
        height: 20px;
    }
}

.van-uploader__preview-image {
    width: 8rem;
    height: 8rem;

    .van-image__img {
        width: 8rem;
        margin-top: -3px;
        margin-left: -3px;
        height: 8rem;
        border-radius: 50%;
        padding: 6px;
    }
}